<template>
  <div>
    <el-row type="flex" class="row-st" justify="space-between">
      <el-col :span="3" style="text-align:left"><i class="el-icon-s-fold"></i></el-col>
      <el-col :span="6">
        <div id="right_user">
          <img id="icons" src="../assets/fullscreen.png" />
          <div id="user">
            <img id="user_avatar" src="../assets/user.jpg" />
            {{username}}
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="background-color:#39c5bb" type="flex" class="row-bg" justify="space-around">
      <div>测试边框</div>
    </el-row>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        username: "Chino",
      }
    }
  }
</script>
<style scoped>
  #user_avatar {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 0 10px;
  }

  #user {
    display: flex;
    font-size: 16px;
    align-items: center;
    border-bottom: 2px solid #03bbf8;
    height: 58px;
  }

  #icons {
    margin-right: 20px;
    width: 24px;
    height: 24px;
  }

  #right_user {
    display: flex;
    height: 60px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
  }

  .el-row {
    padding: 0 20px;
    align-items: center;
    flex-wrap: nowrap;
  }

  .el-col {
    font-size: 30px;
  }

  .row-bg {
    background-color: #fff;
    height: 50px;
  }

  .row-st {
    background-color: #fff;
    height: 60px;
  }


</style>
